<template>
    <div class="container">
      <h2>光遇季节<br>____________________________</h2>
      <div class="desc">
      <ul>
      <li v-for="(item, index) in pwd2" :key="index"> 
          
            <img :src="getImgUrl(item.imgs)" alt="" >
            
            <span>{{ item.id }}</span>
           
       
      </li>
      </ul>
      </div>
    </div>
  
  
  
  </template>
  
<script>
import axios from 'axios'
import { ref, onMounted } from 'vue'
//用setup函数
export default {
  setup() {
    //用ref定义数据
    const pwd2 = ref(null)
    //定义方法，用于获取图片路径，不能用require,因为版本问题
    const getImgUrl = (imgs) => {
      //用相对路径
      return new URL('../assets/img/' + imgs, import.meta.url).href
    }
    //组件创建完成后执行,挂载完毕
    onMounted(() => {
      axios.get('../public/pwd2.json')
       .then(response => {
          pwd2.value = response.data
        })
       .catch(error => {
          console.log(error)
        })
    })
    return {
      pwd2,
      getImgUrl
    }
  }
}
  
  
  </script>
  
  <style scoped>
  h2{
      font-family: "华文琥珀";
      font-size: 40px;
      color: #FF6600;
      font-weight: normal;
  }
  
  
  
  
  span{
          font-size: 20px;
          font-family: 隶书;
          color: #333333;
          margin-top: 10px;
          align-self: left;
          float: right;
  
          width: 400px;
          height: 140px;
      }
  .desc ul{
      display: flex;/*设置ul为flex布局*/
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .desc li{
      list-style: none;
      margin-bottom: 20rpx;
      position: relative;
      width: 630px;
      height: 160px;
      font-size: 0px;
      
  }
  img{
      width: 200px;
      height: 150px;
      margin-bottom: 10px;/*图片间距*/
  }
  
  
  </style>